<script setup>
import { ref, onMounted } from 'vue';
import { getNiceList } from '@/api/portal/content';
import { getCategoryChild } from '@/api/portal/category';

const ProChildList = ref([]);
const productList = ref([]);

onMounted(async () => {
    const productsRes = await getNiceList({
        category_id: 3,
        limit: 8,
        isnice: 1
    });
    productList.value = productsRes.data;
    const childRes = await getCategoryChild(3);
    ProChildList.value = childRes.data;
});
</script>
<template>
    <div class="py-6 px-6 mt-0 mx-0 lg:mx-20">
        <div class="flex flex-row justify-between items-center mt-10 mb-6 px-2">
            <div class="flex items-center gap-4">
                <span class="text-3xl font-medium text-surface-900 dark:text-surface-100">产品展示</span>
                <span class="text-2xl font-regular text-surface-500 dark:text-surface-400">Product Show</span>
            </div>
            <div class="flex items-center gap-4">
                <Button label="更多" size="large" class="lg:!hidden"></Button>
                <div class="hidden lg:flex flex-auto items-center gap-4">
                    <Button as="router-link" to="/portal/pro/3" label="全部" size="large" class="whitespace-nowrap"></Button>
                    <Button as="router-link" :to="item.cate_link" :label="item.cate_name" size="large" outlined class="whitespace-nowrap" v-for="item in ProChildList" :key="item.cate_id"></Button>
                </div>
            </div>
        </div>
        <div class="">
            <DataView :value="productList" layout="grid">
                <template #grid="slotProps">
                    <div class="grid grid-cols-12 gap-4">
                        <div v-for="(item, index) in productList" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 p-2">
                            <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                                <div class="bg-surface-50 flex justify-center rounded p-4">
                                    <div class="relative mx-auto">
                                        <img class="rounded w-full" :src="`${item.pic}`" :alt="item.name" style="max-width: 300px" />
                                        <Tag :value="item.cate_name" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
                                    </div>
                                </div>
                                <div class="pt-6">
                                    <div class="flex flex-row justify-between items-start gap-2">
                                        <div>
                                            <router-link :to="item.link" class="text-lg font-medium mt-1 line-clamp-2">
                                                {{ item.title }}
                                            </router-link>
                                        </div>
                                    </div>
                                    <div class="flex flex-col gap-6 mt-6">
                                        <span class="text-2xl font-semibold">${{ item.price }}</span>
                                        <div class="flex gap-2">
                                            <Button icon="pi pi-shopping-cart" label="立即购买" class="flex-auto whitespace-nowrap"></Button>
                                            <Button icon="pi pi-heart" outlined></Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </DataView>
        </div>
    </div>
</template>
